<template>
	<div class="uw-image" style="width: 100px;height: 100px;" @mouseenter="showMackModel=true" @mouseleave="showMackModel=false">
		<el-image :src="src" style="width: 100%;height: 100%;"></el-image>
		<div v-if="showMack && showMackModel" class="uw-image-mack uw-flex-center uw-color-white">
			<el-icon @click.stop="previewImage" v-if="preview" :size="20"><ZoomIn /></el-icon>
			<div style="width: 10px;"></div>
			<el-icon @click.stop="deleteImage" v-if="del" :size="20"><Delete /></el-icon>
		</div>
		<el-image-viewer 
			teleported
			v-if="showPreview" 
			:url-list="imageList"
			:initial-index="initialindex"
			@close="showPreview = false"
		/>
	</div>
</template>

<script setup lang="ts">
	/**
	 * 图片渲染组件
	 * @author: lwy
	 * @date: 2022-08-01 15:09:42
	 * @version: V1.0.0
	 * @property {String} src 图片地址
	 * @property {Boolean} showMack 是否显示遮罩层
	 * @property {Boolean} preview 是否可以预览大图
	 * @property {Boolean} del 是否可以删除
	 * @property {Array} imageList 预览大图时需要传入的图片数组
	 * @property {Number} initialindex 预览大图时需要传入的初始索引
	 * @event {Function()} deleteChange 删除图片时触发
	 */
	import { ref } from 'vue';
	defineProps({
		src: {
			type: String,
			default: ''
		},
		showMack:{
			default: false,
			type: Boolean
		},
		preview: {
			type: Boolean,
			default: true
		},
		del: {
			type: Boolean,
			default: true
		},
		imageList:{
			type: Array,
			default: () => []
		},
		initialindex:{
			default:0,
			type: Number
		}
	})
	const emits = defineEmits(['deleteChange'])
	const showPreview = ref(false)
	const showMackModel = ref(false)
	const previewImage = () => {
		showPreview.value = true
	}
	const deleteImage = () => {
		emits('deleteChange')
	}
</script>

<style scoped lang="scss">
	.uw-image{
		position: relative;
		cursor: pointer;
		.uw-image-mack{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.5);
			z-index: 9;
		}
	}
</style>